<script setup>

import { ref, reactive, computed, toRefs } from 'vue';

import api from '@/api';
import { ElMessage } from 'element-plus'

const numberPerPage = 10

const status = ref('0')

const date = ref('')

const disabledPre = computed(() => (page.value === 1))
const disabledNext = computed(() => (page.value * numberPerPage >= data.value.length))

const radioData = reactive({
    code: true,
    name: true,
    mName: true,
    supplier: true,
    number: true,
    unit: true,
    createTime: true,
    newOld: true,
    checker: true,
    explosionProofLicense: true,
    productionLicense: true,
})

const data = ref([])

const tableData = ref([])

const page = ref(1)

const onSubmit = () => {

    let tmpDate = date.value.toLocaleDateString().replace(new RegExp('\/', 'g'), '-')
    return new Promise((resolve, reject) => {
        // 更改分页，以及每页尺寸大小
        api.post('api/equipment/list', {
            'status': status.value,
            'startTime': tmpDate + ' 00:00:00',
            'endTime': tmpDate + ' 23:59:59',
            page: 1,
            pageSize: Number.MAX_SAFE_INTEGER
        }).then(res => {
            data.value = res.d.records
            fillTable(page.value)
            resolve()
        }).catch(error => {
            data.value = []
            fillTable(page.value)
        })
    })
}

const onExport = () => {
    try {
        let tmpDate = date.value.toLocaleDateString().replace(new RegExp('\/', 'g'), '-')
        return new Promise((resolve, reject) => {
            // 更改分页，以及每页尺寸大小
            api.post('api/equipment/listExport', {
                'status': status.value,
                'startTime': tmpDate + ' 00:00:00',
                'endTime': tmpDate + ' 23:59:59',
            }, {'responseType': 'blob'}).then(res => {
                ElMessage({
                    message: '导出成功！'
                })
                handleExport(res)
                resolve()
            }).catch(error => {
                ElMessage({
                    message: '无记录可导出！'
                })
            })
        })
    } catch (error) {
        ElMessage({
            message: '无记录可导出！'
        })
    }
    
}

const handleExport = blob => {
    const a = document.createElement("a"); 
    const url = window.URL.createObjectURL(blob); // 创建媒体流 url ，详细了解可自己查 URL.createObjectURL（推荐 MDN ）

    a.href = url;
    a.style.display = "none";
    a.download = '清单.xls';
    document.body.appendChild(a);
    a.click();
    a.parentNode.removeChild(a);
    window.URL.revokeObjectURL(url); // 删除创建的媒体流 url 对象
}

const nextPage = () => {
    page.value ++

    fillTable(page.value)
}

const prePage = () => {
    page.value --

    fillTable(page.value)
}

// 这里要用深拷贝 否则 data和tableData 会同时改变
const fillTable = num => {
    tableData.value = JSON.parse(JSON.stringify([].slice.call(data.value, (num - 1) * numberPerPage, num * numberPerPage)))
    for(let d of tableData.value) {
        if(d.code.length > 7) {
            d.code = d.code.slice(0, 7) + '...'
        }
        if(d.supplier.length > 7) {
            d.supplier = d.supplier.slice(0, 7) + '...'
        }
    }
    console.log(data.value, tableData.value)
}


const {
    code,
    name,
    mName,
    supplier,
    number,
    unit,
    createTime,
    newOld,
    checker,
    explosionProofLicense,
    productionLicense,
} = toRefs(radioData)

</script>

<template>
    <page-main>
        <el-form>
            <div style="display: flex; justify-content: space-between;">
                <el-form-item label="设备类型" style="flex: 4">
                    <el-select v-model="status">
                        <el-option label="所有" value="0" />
                        <el-option label="已入库" value="1" />
                        <el-option label="已发放" value="2" />
                        <el-option label="已回收" value="3" />
                        <el-option label="已维修" value="4" />
                        <el-option label="已报废" value="5" /> 
                    </el-select>
                </el-form-item>
                <el-form-item label="操作日期" style="flex: 4">
                    <el-date-picker  v-model="date" />
                </el-form-item>
                <el-button type="primary" style="flex: 1;" @click="onSubmit">查询</el-button>
                <el-button type="primary" style="flex: 1;" @click="onExport">导出</el-button>
            </div>

            <el-card>
                <div style="display: flex; flex-wrap: wrap; justify-content: space-between; height: 40px;" >
                    <el-form-item label="编号" style="flex: 0 1 auto; transform: scale(0.7 0.7);">
                        <el-checkbox v-model="code"></el-checkbox>
                    </el-form-item> 
                    <el-form-item label="名称" style="flex: 0 1 auto; transform: scale(0.7 0.7);">
                        <el-checkbox v-model="name" size="small"></el-checkbox>
                    </el-form-item> 
                    <el-form-item label="型号" style="flex: 0 1 auto; transform: scale(0.7 0.7);">
                        <el-checkbox v-model="mName" size="small"></el-checkbox>
                    </el-form-item> 
                    <el-form-item label="供应商" style="flex: 0 1 auto; transform: scale(0.7 0.7);">
                        <el-checkbox v-model="supplier" size="small"></el-checkbox>
                    </el-form-item> 
                    <el-form-item label="数量" style="flex: 0 1 auto; transform: scale(0.7 0.7);">
                        <el-checkbox v-model="number" size="small"></el-checkbox>
                    </el-form-item> 
                    <el-form-item label="单位" style="flex: 0 1 auto; transform: scale(0.7 0.7);">
                        <el-checkbox v-model="unit" size="small"></el-checkbox>
                    </el-form-item> 
                    <el-form-item label="入库时间" style="flex: 0 1 auto; transform: scale(0.7 0.7);">
                        <el-checkbox v-model="createTime" size="small"></el-checkbox>
                    </el-form-item> 
                    <el-form-item label="新旧" style="flex: 0 1 auto; transform: scale(0.7 0.7);">
                        <el-checkbox v-model="newOld" size="small"></el-checkbox>
                    </el-form-item> 
                    <el-form-item label="验收人" style="flex: 0 1 auto; transform: scale(0.7 0.7);">
                        <el-checkbox v-model="checker" size="small"></el-checkbox>
                    </el-form-item> 
                    <el-form-item label="防爆证" style="flex: 0 1 auto; transform: scale(0.7 0.7);">
                        <el-checkbox v-model="explosionProofLicense" size="small"></el-checkbox>
                    </el-form-item> 
                    <el-form-item label="生产证" style="flex: 0 1 auto; transform: scale(0.7 0.7);">
                        <el-checkbox v-model="productionLicense" size="small"></el-checkbox>
                    </el-form-item> 
                    
                </div>
            </el-card>
            

        </el-form>


        <el-table
            ref="tableRef"
            :data="tableData" :cell-style="rowClass"
            style="width: 100%;height:auto;font-size: 8px;"
            highlight-current-row
            @current-change="handleCurrentChange"
        >
            <el-table-column
                fixed
                prop="code"
                v-if="code"
                label="编号"
                width="100"
            />
            <el-table-column
                prop="name"
                v-if="name"
                label="名称"
                width="150"
            />
            <el-table-column
                prop="mName"
                v-if="mName"
                label="型号"
                width="120"
            />
            <el-table-column
                prop="supplier"
                v-if="supplier"
                label="供应商"
                width="100"
            />
            <el-table-column
                prop="number"
                v-if="number"
                label="数量"
                width="60"
            />
            <el-table-column
                prop="unit"
                v-if="unit"
                label="单位"
                width="60"
            />
            <el-table-column
                prop="createTime"
                v-if="createTime"
                label="入库时间"
                width="150"
            />
            <el-table-column
                prop="newOld"
                v-if="newOld"
                label="新旧程度"
                width="80"
            />
            <el-table-column
                prop="statusName"
                v-if="statusName"
                label="设备状态"
                width="80"
            />
            <el-table-column
                prop="checker"
                v-if="checker"
                label="添加人"
                width="80"
            />
            <el-table-column
                prop="explosionProofLicense"
                v-if="explosionProofLicense"
                label="防爆许可证"
                width="90"
            />
            <el-table-column
                prop="productionLicense"
                v-if="productionLicense"
                label="生产许可证"
                width="90"
            />
        </el-table>
        <div :style="{height: '50px', width: '100%', position: 'relative'}">
            <div style="height: 25px;
            width: 240px;
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            margin: auto;
    
            font-size: 8px;">
                <span>第&nbsp;{{page}}&nbsp;页</span>
                <span>共&nbsp;{{ Math.ceil(data.length / numberPerPage) }}&nbsp;页   </span>
                
                
                <el-button-group size="small">
                    <el-button type="primary" @click="prePage" :disabled="disabledPre">上页</el-button>
                    <el-button type="primary" @click="nextPage" :disabled="disabledNext">下页</el-button>
                </el-button-group>  
            </div>
        </div>
    </page-main>
</template>

<style>
    .outer {
        display: flex;

        height: auto;
    }

    .left {
        flex: 1;
        font-size: 8px
    }

    .right {
        width: 80px;
        position: relative;
        margin-bottom: 10px;
    }

    .child {
        height: 30px;
        width: 100px;
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        bottom: 0;
        margin: auto;

        font-size: 8px;
    }

    span {
        margin-right: 10px;
    }

   
    
</style>